import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Feedback, Dialog, Form, Input, Field, Select } from '@icedesign/base';
import CustomTable from '../CustomTable';
import Ajax from '../../../../../Ajax';
import Api from '../../../../../Api/Api';

const FormItem = Form.Item;
export default class ContractTable extends Component {
  static displayName = 'ContractTable';

  static propTypes = {
    dataSource: PropTypes.array.isRequired,
    isLoading: PropTypes.bool.isRequired,
    total: PropTypes.number,
    value: PropTypes.object,
    changeData: PropTypes.func,
    deleteData: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      visible2: false,
      // 当前删除的商品编号
      goodIndex: 0
    };
    this.field = new Field(this);
  }

  // 编辑按钮点击事件
  handleUpdate = (value) => {
    var setFieldValue = {};
    this.props.dataSource.forEach((val) => {
      if (val['id'] === value) {
        Object.assign(setFieldValue, val);
        return;
      }
    })
    // console.log(value, this.props.dataSource, setFieldValue);
    this.field.setValues(setFieldValue);
    this.setState({
      visible: true
    });
    // Feedback.toast.success('暂不支持修改合同');
  };

  // 删除按钮点击事件
  handleMore = (value) => {
    // Feedback.toast.success('暂不支持查看详情');
    // console.log(value)
    this.setState({
      visible2: true,
      goodIndex: value
    })
  };

  // 编辑商品dialog框关闭事件
  onClose = () => {
    this.setState({
      visible: false
    });
  };

  // 删除商品dialog框关闭事件
  onClose2 = () => {
    this.setState({
      visible2: false
    });
  };

  renderOper = (value) => {
    return (
      <div>
        <a style={styles.link} onClick={this.handleUpdate.bind(this,value)}>
          编辑
        </a>
        <span style={styles.separator} />
        <a style={styles.link} onClick={this.handleMore.bind(this,value)}>
          删除
        </a>
      </div>
    );
  };

  // 编辑框提交按钮事件
  handleSubmit = () => {
    this.field.validate((errors, values) => {
      if (errors) {
        return;
      }
      // console.log(values);
      var url = Api.changeGoodInfomation(values);
      // console.log(url);
      Feedback.toast.show({
        type: 'loading',
        content: '正在修改'
      });
      Ajax.get(url)
        .then((res) => {
          Feedback.toast.hide();
          if (res.data.code) {
            Feedback.toast.show({
              content: res.data.message,
              afterClose: () => {
                this.props.changeData(values);
                this.onClose();
              }
            })
          }
        })
    })
  }

  // 删除框提交事件
  handleSubmit2 = () => {
    var deleteObject = {};
    var pageNumber = this.refs.getcurrent.state.current;
    this.props.dataSource.forEach((val) => {
      if (val.id === this.state.goodIndex) {
        Object.assign(deleteObject, val);
        return;
      }
    });
    var url = Api.deleteGood(deleteObject);
    // console.log(this, pageNumber);
    Feedback.toast.show({
      type: 'loading',
      content: '正在删除'
    });
    Ajax.get(url)
      .then((res) => {
        Feedback.toast.hide();
        if (res.data.code) {
          Feedback.toast.show({
            content: res.data.message,
            afterClose: () => {
              this.setState({
                goodIndex: 0,
                visible2: false,
              });
              this.props.deleteData(this.props.value, pageNumber);
            }
          })
        } else {
          Feedback.toast.show({
            content: res.data.message,
            afterClose: () => {
              this.setState({
                goodIndex: 0,
                visible2: false,
              });
            }
          })
        }
      })
  }

  renderDialog = () => {
    const init = this.field.init;
    const formItemLayout = {
      labelCol: {
        fixedSpan: 6,
      },
      wrapperCol: {
        span: 14,
      },
    };
    return(
      <Dialog
        style={{ width: 640 }}
        visible={this.state.visible}
        onOk={this.handleSubmit}
        onCancel={this.onClose}
        onClose={this.onClose}
        title="编辑商品"
        closable="esc,mask,close"
      >
         <Form direction="ver">
            <FormItem label="商品编号：" {...formItemLayout}>
              <Input
              {...init('id', {
                rules: [{ required: true, message: '必填选项' }],
              })}
              readOnly={true}
              />
            </FormItem>

            <FormItem label="商品名称：" {...formItemLayout}>
              <Input
              {...init('name', {
                rules: [{ required: true, message: '必填选项' }],
              })}
              />
            </FormItem>

            <FormItem label="商品分类：" {...formItemLayout}>
              <Input
              {...init('category', {
                rules: [{ required: true, message: '必填选项' }],
              })}
              />
            </FormItem>

            <FormItem label="商品价格：" {...formItemLayout}>
              <Input
              {...init('price', {
                rules: [{ required: true, message: '必填选项' }],
              })}
              />
            </FormItem>

            <FormItem label="商品大小：" {...formItemLayout}>
              <Select
                {...init('size', {
                  rules: [{ required: true, message: '必填选项' }],
                })}
              >
                <div value="标准">标准</div>
                <div value="小">小</div>
                <div value="中">中</div>
                <div value="大">大</div>
              </Select>
            </FormItem>

            <FormItem label="商品介绍：" {...formItemLayout}>
              <Input
              {...init('introduce', {
                rules: [{ required: true, message: '必填选项' }],
              })}
              />
            </FormItem>
            
          </Form>
      </Dialog>
    )
  }

  renderDialog2 = () => {
    return (
      <Dialog
        style={{width: 320}}
        visible={this.state.visible2}
        onOk={this.handleSubmit2}
        onCancel={this.onClose2}
        onClose={this.onClose2}
        title="删除商品"
        closable="esc,mask,close"
      >
        <h3>确认删除商品么？</h3>
      </Dialog>
    )
  }

  columnsConfig = () => {
    return [
      {
        title: '商品编号',
        dataIndex: 'id',
        key: 'id',
        width: 100,
      },
      {
        title: '商品名称',
        dataIndex: 'name',
        key: 'name',
        width: 100,
      },
      {
        title: '商品类别',
        dataIndex: 'category',
        key: 'category',
        width: 100,
      },
      {
        title: '商品介绍',
        dataIndex: 'introduce',
        key: 'introduce',
        width: 160,
      },
      {
        title: '商品价格',
        dataIndex: 'price',
        key: 'price',
        width: 100,
      },
      {
        title: '商品大小',
        dataIndex: 'size',
        key: 'size',
        width: 100,
      },
      {
        title: '操作',
        dataIndex: 'id',
        key: 'id',
        cell: this.renderOper,
        width: 100,
      },
    ];
  };

  render() {
    const DialogEdit = this.renderDialog();
    const DialogDelete = this.renderDialog2();
    // console.log(this.refs.getcurrent.state.current)
    return (
      
      <div>
        <CustomTable {...this.props} columns={this.columnsConfig()} ref="getcurrent"/>
        {DialogEdit}
        {DialogDelete}
      </div>
    );
  }
}

const styles = {
  stateText: {
    display: 'inline-block',
    padding: '5px 10px',
    color: '#52c41a',
    background: '#f6ffed',
    border: '1px solid #b7eb8f',
    borderRadius: '4px',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
};
